<template>
  <div>
    <router-view></router-view>
  </div>
</template>
  
<script>
import { toRefs } from '@vue/reactivity'
import { useRouter } from 'vue-router'
export default {
  setup(){
    const router = useRouter()
    const state = {
      transitionName:'slide-left'
    }

    router.beforeEach((to,from) => { //钩子函数 路由守卫  
      // 在页面上做登录超时就跳回登录页面怎么办 
      // console.log(to,from);
      if(to.meta.index > from.meta.index) {
        state.transitionName='slide-left'
      } else if (to.meta.index < from.meta.index) {
        state.transitionName='slide-right'
      } else {
        state.transitionName = ''
      }
    })

    return{
      ...toRefs(state)
    }
  }
  
};
</script>
  
<style>
</style>
